<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core" 
                xmlns:ui="http://java.sun.com/jsf/facelets" 
                xmlns:p="http://primefaces.org/ui"
                template="/template/plantilla.xhtml">
    <ui:define name="title"><h:outputText value="Sinetcom - Ingreso de Contactos de Cliente"></h:outputText></ui:define>
    <ui:define name="menu"><ui:include src="/menu/menu.xhtml" /></ui:define>
    <ui:define name="content">
        <f:view contentType="text/html">
            <h:head/>

            <h:body>

                <h:form id="verContactosForm">
                    <p:dataTable id="dtContactos" rowKey="#{contactos.id}" var="contactos" value="#{ingresoContactoBean.contactos}" paginator="true" rows="15"
                                 selection="#{ingresoContactoBean.contactoSeleccionado}" selectionMode="single" paginatorPosition="bottom"
                                 paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}">

                        <f:facet name="header">
                            <h:outputText value="Contactos"/>
                        </f:facet>
                        
                        <p:ajax event="rowSelect" immediate="true" update="btnEliminar, btnEditar"></p:ajax>
                        <p:ajax event="rowUnselect" immediate="true" update="btnEliminar, btnEditar"></p:ajax>

                        <p:column headerText="Cédula" sortBy="#{contactos.cedulaDeCuidadania}" filterBy="#{contactos.cedulaDeCuidadania}">
                            <h:outputText value="#{contactos.cedulaDeCuidadania}"/>
                        </p:column>

                        <p:column headerText="Nombre" sortBy="#{contactos.nombre}" filterBy="#{contactos.nombre}">
                            <h:outputText value="#{contactos.nombre}"/>
                        </p:column>

                        <p:column headerText="e-Mail" sortBy="#{contactos.correoElectronico}" filterBy="#{contactos.correoElectronico}">
                            <h:outputText value="#{contactos.correoElectronico}"/>
                        </p:column>

                        <p:column headerText="Teléfono" sortBy="#{contactos.telefonoFijo}" filterBy="#{contactos.telefonoFijo}">
                            <h:outputText value="#{contactos.telefonoFijo}"/>
                        </p:column>

                        <p:column headerText="Celular" sortBy="#{contactos.telefonoMovil}" filterBy="#{contactos.telefonoMovil}">
                            <h:outputText value="#{contactos.telefonoMovil}"/>
                        </p:column>

                        <f:facet name="footer">
                            <p:commandButton id="btnCrear" value="Crear" actionListener="#{ingresoContactoBean.definirContacto}" update=":contactosForm" onclick="PF('ingreso').show();" >
                                <f:attribute name="esNuevo" value="true"></f:attribute>
                            </p:commandButton>       
                            <p:commandButton id="btnEliminar" process="dtContactos" value="Eliminar" action="#{ingresoContactoBean.eliminarContacto()}" disabled="#{not(ingresoContactoBean.contactoSeleccionado != null)}" update=":verContactosForm:dtContactos"/>                       
                            <p:commandButton id="btnEditar" process="dtContactos" value="Editar" actionListener="#{ingresoContactoBean.definirContacto}" disabled="#{not(ingresoContactoBean.contactoSeleccionado != null)}" update=":contactosForm" onclick="PF('ingreso').show();" >
                                <f:attribute name="esNuevo" value="false"></f:attribute>
                            </p:commandButton>
                        </f:facet>
                    </p:dataTable>    
                </h:form>

                <p:dialog header="Insertar / Editar Contacto" widgetVar="ingreso" modal="true">
                    <h:form id="contactosForm">
                        <h:panelGrid columns="2" columnClasses="colum" cellpadding="5">

                            <p:outputLabel for="contactoRuc" value="Ruc Cliente"/>
                            <p:selectOneMenu id="contactoRuc" value="#{ingresoContactoBean.contactoSeleccionado.clienteEmpresaid}" converter="#{clienteEmpresaConverter}" required="true">                    
                                <f:selectItem itemLabel="Selecione..." itemValue=""/>                    
                                <f:selectItems value="#{ingresoContactoBean.clientes}" var="Clientes" itemLabel="#{Clientes.nombreComercial}" itemValue="#{Clientes.id.toString()}" />
                             </p:selectOneMenu>

                            <p:outputLabel for="contactoCedula" value="Cédula de C.:"/>
                            <p:inputText id="contactoCedula" maxlength="10" value="#{ingresoContactoBean.contactoSeleccionado.cedulaDeCuidadania}" validator="#{ingresoContactoBean.validarActualizacionCedulaDeCiudadania}" required="true"/>

                            <p:outputLabel for="contactoNombre" value="Nombre:"/>
                            <p:inputText id="contactoNombre" maxlength="30" value="#{ingresoContactoBean.contactoSeleccionado.nombre}" required="true"/>

                            <p:outputLabel for="contactoCargo" value="Cargo:"/>
                            <p:inputText id="contactoCargo" maxlength="50" value="#{ingresoContactoBean.contactoSeleccionado.cargo}" required="true"/>

                            <p:outputLabel for="contactoCelular" value="Celular:"/>
                            <p:inputText id="contactoCelular" maxlength="15" value="#{ingresoContactoBean.contactoSeleccionado.telefonoMovil}" required="true"/>

                            <p:outputLabel for="contactoTelefono" value="Teléfono:"/>
                            <p:inputText id="contactoTelefono" maxlength="15" value="#{ingresoContactoBean.contactoSeleccionado.telefonoFijo}" required="true"/>

                            <p:outputLabel for="contactoMail" value="e-Mail:"/>
                            <p:inputText id="contactoMail" maxlength="45" value="#{ingresoContactoBean.contactoSeleccionado.correoElectronico}" validator="#{ingresoContactoBean.validarActualizacionEmail}" required="true"/>

                            <p:commandButton id="btnGrabar" value="Grabar" action="#{ingresoContactoBean.crearContacto()}" onstart="statusDialog.show();" oncomplete="if (args &amp;&amp; !args.validationFailed){ PF('ingreso').hide();} statusDialog.hide();" update=":verContactosForm:dtContactos">
                                <f:ajax execute="@all" render="@form"/>
                            </p:commandButton>

                        </h:panelGrid>
                    </h:form>
                </p:dialog>    
            </h:body>
        </f:view>
    </ui:define>
</ui:composition>

